<script lang="ts" setup>
import { ref } from 'vue';

const list = ref<any>([{
    wxinfo: {
        name: '梁春飞',
        id: 121083638
    },
    activityName: "五一特惠，5.1元开抢体验课，火热报名中！",
    tags: ['老客', '高可能'],
    joinTime: '2025-05-02 19:32',
    signUpCount: 6
}])
</script>

<template>
    <umrp-container direction="vertical" :gap="16" height="100%" bg-color="#f2f2f2" padding="16px">
        <umrp-breadcrumb :items="['客户管理', '客户列表']"></umrp-breadcrumb>
        <umrp-card>
            <umrp-grid :cols="5" :col-gap="10">
                <umrp-grid-item>
                    <umrp-statistic :value="0" extra="客户总数"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="0" extra="新客"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="0" extra="老客"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="0" extra="下单客户"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="0" extra="分销客户"></umrp-statistic>
                </umrp-grid-item>
            </umrp-grid>
        </umrp-card>
        <umrp-card>
            <umrp-row :gutter="16">
                <umrp-col :span="7">
                    <umrp-form-item label="姓名/昵称">
                        <umrp-input placeholder="请输入姓名/昵称"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="7">
                    <umrp-form-item label="来源渠道">
                        <umrp-input placeholder="请输入来源渠道"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="7">
                    <umrp-form-item label="手机号码">
                        <umrp-input placeholder="请输入手机号码"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="3">
                    <umrp-space align="end" :size="10">
                        <umrp-button type="primary">搜索</umrp-button>
                        <umrp-button type="primary">重置</umrp-button>
                    </umrp-space>
                </umrp-col>
            </umrp-row>
        </umrp-card>
        <umrp-card>
            <umrp-table :data="list">
                <template #columns>
                    <umrp-table-column title="微信资料" slot-name="wxinfo"></umrp-table-column>
                    <umrp-table-column title="来源渠道" data-index="activityName"></umrp-table-column>
                    <umrp-table-column title="用户标签" slot-name="tags"></umrp-table-column>
                    <umrp-table-column title="加入时间" data-index="joinTime"></umrp-table-column>
                    <umrp-table-column title="报名次数" data-index="signUpCount"></umrp-table-column>
                    <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
                </template>
                <template #wxinfo="{ wxinfo }">
                    <umrp-user-info v-bind="wxinfo"></umrp-user-info>
                </template>
                <template #tags="{ tags }">
                    <umrp-space :size="6">
                        <umrp-label v-for="tag in tags">{{ tag }}</umrp-label>
                    </umrp-space>
                </template>
                <template #action>
                    <umrp-space :size="10">
                        <umrp-button type="primary">详情</umrp-button>
                        <umrp-button type="primary">设置标签</umrp-button>
                    </umrp-space>
                </template>
            </umrp-table>
        </umrp-card>
    </umrp-container>
</template>